<extend name="Public/base"/>
<block name="body">
    <style>
      #uploadVideoBtn, .videoUploadInfo{
        width: 298px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
        background: #FFFFFF;
        cursor: pointer;
      }
    </style>

    <link href="/Public/static/weui/dist/lib/weui.css" rel="stylesheet" type="text/css">
    <link href="/Public/static/weui/dist/css/jquery-weui.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="__STATIC__/qiniu.js"></script>

    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>

    <form action="" method="post" class="form-horizontal">
        <if condition="I('pid') gt 0">
            <!--  新增视频元素  -->

            <!--  视频名称  -->
            <div class="form-item">
                <label class="item-label">视频名称</label>
                <div class="controls">
                    <input type="text" class="text input-large" name="name" value="{$info.name}">
                </div>
            </div>

            <!--  上传视频  -->
            <div class="form-item">
                <label class="item-label">上传视频</label>
                <div class="controls">
                    <input id="video" class="audio-input" type="file" accept="video/*" style="display: none;">
                    <div id="uploadVideoBtn">上传视频</div>
                    <div class="videoUploadInfo" style="display: none"></div>

                    <div class="weui-progress" style="width: 300px; margin-top: 10px; display: none">
                        <div class="weui-progress__bar" style="height: 6px;border: 1px solid #ccc">
                            <div class="weui-progress__inner-bar js_progress" id="progress" style="width: 0%;"></div>
                        </div>
                    </div>

                    <input type="hidden" class="hash" name="hash">
                    <input type="hidden" class="key" name="key">
                    <input type="hidden" class="duration" name="duration">

                    <script type="text/javascript">
                        $("#uploadVideoBtn").click(function (){
                            $("#video").trigger("click");
                        })
                        $("#video").on("change", function () {
                            if (!this.files[0]) return;
                            file = this.files[0];

                            var url = URL.createObjectURL(file);
                            var audioElement = new Audio(url);
                            audioElement.addEventListener("loadedmetadata", function (_event) {
                                //视频时长（需要在存数据前四舍五入）
                                var duration = audioElement.duration;
                                $('.duration').val(duration);
                            });
                            sendVideo(file);
                        });
                        //上传视频
                        function sendVideo(file) {
                            var suffix = file.name.split(".");
                            suffix = "." + suffix[suffix.length - 1];
                            var observable = qiniu.upload(file, new Date().getTime() + suffix, '{$token}'); //这里需要获取七牛的token 在后端获取传到前台
                            observable.subscribe(function (ret) {
                                $('.videoUploadInfo').show().html('视频已上传'+ parseInt(ret.total.percent) +'%')
                                $('#uploadVideoBtn').hide();
                                $('.weui-progress').show();
                                $('#progress').css('width', parseInt(ret.total.percent) + '%')
                            }, function (err) {
                                console.log(err)
                            }, function (ret) {
                                //上传完成后继续业务逻辑
                                $('#uploadVideoBtn').show().html(ret.key)
                                $('.videoUploadInfo').hide();
                                $('.hash').val(ret.hash);
                                $('.key').val(ret.key);
                            });
                        }
                    </script>
                </div>
            </div>
            <input type="hidden" name="video_price" value="{$video_price}">
            <notempty name="video_price">
                <!--  是否可试看  -->
                <div class="form-item">
                    <label class="item-label">试看</label>
                    <div class="controls">
                        <label><input type="radio" class="is_look" name="is_look" value="0" checked> 不可试看</label>
                        <label><input type="radio" class="is_look" name="is_look" value="1"> 可试看</label>
                        <label><input type="radio" class="is_look" name="is_look" value="2"> 免费观看</label>
                    </div>
                </div>

                <!--  试看时长  -->
                <div class="form-item look_time" style="display: none">
                    <label class="item-label">试看时长<span class="check-tips">（单位：秒）</span></label>
                    <div class="controls">
                        <input type="number" class="text input-large" name="look_time">
                    </div>
                </div>
            </notempty>

            <else />
            <!--  新增目录元素  -->

            <!--  目录名称  -->
            <div class="form-item">
                <label class="item-label">目录名称</label>
                <div class="controls">
                    <input type="text" class="text input-large" name="name" value="{$info.name}">
                </div>
            </div>
        </if>

        <input type="hidden" value="{:I('vc_id')}" name="vc_id" />
        <input type="hidden" value="{:I('pid')}" name="pid" />
        <div class="form-item">
            <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
        </div>
    </form>
</block>

<block name="script">
    <script type="text/javascript">
        $('.is_look').change(function (res){
            var is_look = $(this).val();

            if(is_look == 0 || is_look == 2){
                $('.look_time').hide();
            }else{
                $('.look_time').show();
            }
        })

        //导航高亮
        highlight_subnav('{:U("Manage/videoList")}');
    </script>
</block>